<!--
 * @Author: Hanky-D 946941094@qq.com
 * @Date: 2022-06-08 23:24:24
 * @LastEditors: Hanky-D 946941094@qq.com
 * @LastEditTime: 2022-06-10 00:10:13
 * @FilePath: \mall-merchant-front\src\components\MyHeader.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="header">
    <div class="head-top">
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6" :offset="22"><div class="avaimg"></div></el-col>
      </el-row>
    </div>
    <!-- 显示当前路由位置 -->
    <div class="cur-path">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script>
export default {
  name: "My-Header",
  methods: {
    goBack() {
      console.log("go back");
    },
  },
};
</script>
	
<style scoped>
.header {
/* width: 100%; */
}
.head-top {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  /* width: 100%; */
  height: 40px;
  padding: 10px;
  text-align: center;
  
}
.avaimg {
  background-color: black;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.cur-path{
	margin: 20px;
}
::v-deep .el-breadcrumb {
  font-size: 20px;
}

</style>